<template>
  <div class="container">
    <div class="info">
      <div class="title">我的在线简历</div>

      <hr />

      <n-form
        ref="formRef"
        :label-width="80"
        :model="formValue"
        :rules="rules"
        :size="size"
      >
        <div class="upload">
          <!-- <n-upload
            action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
            list-type="image-card"
            max="1"
          >
            点击上传
          </n-upload> -->
          <n-image
            width="100"
            src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
          />
        </div>
        <div class="icon"></div>
        <n-form-item label="姓名" path="name" size="small">
          <n-input v-model:value="formValue.name" placeholder="输入姓名" />
        </n-form-item>

        <div class="icon"></div>
        <n-form-item label="年龄" path="age" size="small">
          <n-input v-model:value="formValue.age" placeholder="输入年龄" />
        </n-form-item>

        <div class="icon"></div>
        <n-form-item label="电话号码" path="phone" size="small">
          <n-input v-model:value="formValue.phone" placeholder="电话号码" />
        </n-form-item>

        <div class="icon"></div>
        <n-form-item path="email" label="邮箱">
          <n-auto-complete
            v-model:value="formValue.email"
            :input-props="{
              autocomplete: 'disabled',
            }"
            :options="options"
            placeholder="邮箱"
          />
        </n-form-item>

        <div class="icon"></div>
        <n-form-item label="教育经历" path="educational_experience">
          <n-input
            v-model:value="formValue.educational_experience"
            type="textarea"
            placeholder="教育经历"
          />
        </n-form-item>

        <div class="icon"></div>
        <n-form-item size="small" label="专业技能" path="skill">
          <n-input
            v-model:value="formValue.skill"
            type="textarea"
            placeholder="专业技能"
          />
        </n-form-item>

        <div class="icon"></div>
        <n-form-item size="small" label="项目经历" path="project_experience">
          <n-input
            v-model:value="formValue.project_experience"
            type="textarea"
            placeholder="项目经历"
          />
        </n-form-item>

        <div class="icon"></div>
        <n-form-item size="small" label="期望职位" path="dream_position">
          <n-input
            v-model:value="formValue.dream_position"
            type="textarea"
            placeholder="职位"
          />
        </n-form-item>

        <div class="icon"></div>
        <n-form-item size="small" label="期望薪水" path="dream_salary">
          <n-input
            v-model:value="formValue.dream_salary"
            type="textarea"
            placeholder="薪水"
          />
        </n-form-item>

        <div class="icon"></div>
        <n-form-item size="small" label="自我评价" path="self_evaluation">
          <n-input
            v-model:value="formValue.self_evaluation"
            type="textarea"
            placeholder="自我评价"
          />
        </n-form-item>

        <n-button class="button" round type="primary" @click="generateResume">
          生成简历
        </n-button>

        <n-form-item class="verify">
          <n-button type="primary" round @click="handleValidateClick">
            验证简历
          </n-button>
        </n-form-item>
      </n-form>
    </div>
  </div>
</template>

<script setup>
import { addResumeAPI } from "@/http/api/student"
import { useStore } from "vuex"
import { useRouter } from "vue-router"
import { computed, ref, reactive, toRaw } from "vue"
const formRef = ref(null)
const size = ref("large")
const valueRef = ref("")
const formValue = ref({
  id: 2,
  user_id: 2,
  name: "",
  age: "",
  educational_experience: "",
  skill: "",
  project_experience: "",
  dream_position: "",
  dream_salary: "",
  self_evaluation: "",
  email: toRaw(valueRef),
  phone: "",
})

//实现邮箱自动填充
// 实现邮箱自动填充

const options = computed(() => {
  return [
    "@gmail.com",
    "@163.com",
    "@qq.com",
    "@hotmail.com",
    "@outlook.com",
  ].map((suffix) => {
    const prefix = valueRef.value.split("@")[0]
    return {
      label: prefix + suffix,
      value: prefix + suffix,
    }
  })
})

const rules = reactive({
  name: {
    required: true,
    message: "请输入姓名",
    trigger: ["input", "blur"],
  },
  age: {
    required: true,
    message: "请输入年龄",
    trigger: ["input", "blur"],
  },
  phone: {
    required: true,
    message: "请输入电话号码",
    trigger: ["input", "blur"],
  },

  email: {
    required: true,
    message: "请输入邮箱",
    trigger: ["input", "blur"],
  },

  educational_experience: {
    required: true,
    message: "请输入教育经历",
    trigger: ["input", "blur"],
  },

  skill: {
    required: true,
    message: "请输入专业技能",
    trigger: ["input", "blur"],
  },

  project_experience: {
    required: true,
    message: "请输入项目经历",
    trigger: ["input", "blur"],
  },

  dream_position: {
    required: true,
    message: "请输入职位",
    trigger: ["input", "blur"],
  },
  dream_salary: {
    required: true,
    message: "请输入薪水",
    trigger: ["input", "blur"],
  },

  self_evaluation: {
    required: true,
    message: "请输入个人总结",
    trigger: ["input", "blur"],
  },
})

// const message = () => window.$message

// const dialog = () => window.$dialog

const store = useStore()
const router = useRouter()

// 表单验证回调函数
const handleValidateClick = (e) => {
  e.preventDefault()
  formRef.value?.validate((errors) => {
    if (!errors) {
      window.$message.success("验证成功")
    } else {
      // console.log(errors)
      window.$message.error("验证失败")
    }
  })
}
//增加学生简历
const generateResume = () => {
  addResumeAPI(formValue.value)
    .then((result) => {
      console.log(result)
    })
    .catch((err) => {
      console.log(err)
    })
}
</script>

<style lang="scss" scoped>
.router-link-active {
  //点击时去掉下划线
  text-decoration: none;
}

a {
  text-decoration: none; //去掉原有链接文字下划线
}

.verify {
  position: absolute;
  right: 0px;
  bottom: -22px;
}

.container {
  width: 100%;
  display: flex;
  justify-content: center;

  .title {
    font-size: 35px;
    font-weight: bold;
    color: #36c97b;
    font-family: "STXingkai";
  }

  .info {
    position: relative;
    width: 50%;
    hr {
      margin-bottom: 20%;
      background-color: #36c97b;
    }
    .upload {
      position: absolute;
      top: 5%;
      right: 0%;
    }

    .icon {
      position: absolute;
      border-radius: 2px;
      background-color: #36c97b;
      // background-color: #53cac3;
      width: 2.5px;
      height: 15px;
      margin-left: -1%;
    }
  }
}
</style>
